सीएसएस ग्रिड मेसनरी प्लेसमेंट: पिंटरेस्ट-शैलीतील लेआउट तयार करणे

पिंटरेस्टसारख्या प्लॅटफॉर्ममुळे लोकप्रिय झालेले मेसनरी लेआउट्स, विविध आकारांची सामग्री प्रदर्शित करण्याचा एक दृष्यदृष्ट्या आकर्षक आणि जागेची बचत करणारा मार्ग देतात. पारंपारिकपणे, हे लेआउट मिळविण्यासाठी जावास्क्रिप्ट लायब्ररींची आवश्यकता होती. तथापि, सीएसएस ग्रिडच्या आगमनाने आणि विशेषतः grid-template-rows: masonry या गुणधर्मामुळे (अजूनही प्रायोगिक असले तरी फायरफॉक्ससारख्या ब्राउझरमध्ये उपलब्ध आहे), मेसनरी लेआउट तयार करणे लक्षणीयरीत्या सोपे आणि अधिक कार्यक्षम झाले आहे.

मेसनरी लेआउट अल्गोरिदम समजून घेणे

मेसनरी लेआउटमागील मुख्य कल्पना म्हणजे वस्तूंना स्तंभांमध्ये (columns) व्यवस्थित करणे, रिकामी जागा कमी करणे. सामान्य ग्रिडच्या विपरीत, वस्तू पंक्तींमध्ये (rows) पूर्णपणे संरेखित होत नाहीत. अल्गोरिदम मुळात खालीलप्रमाणे कार्य करते:

1. स्तंभांची रुंदी मोजणे: उपलब्ध स्क्रीन रुंदी आणि इच्छित किमान स्तंभ रुंदीवर आधारित स्तंभांची इष्टतम संख्या निश्चित करा. येथे सीएसएस ग्रिडचे grid-template-columns मधील auto-fit किंवा auto-fill कीवर्ड महत्त्वपूर्ण आहेत.
2. वस्तूची जागा निश्चित करणे: प्रत्येक वस्तू सर्वात लहान स्तंभामध्ये ठेवून, सर्व वस्तूंमधून फिरा. हे सर्व स्तंभांमध्ये सामग्रीचे समान वितरण सुनिश्चित करते.
3. डायनॅमिक समायोजन: ब्राउझर विंडोचा आकार बदलल्यास, स्तंभांची रुंदी पुन्हा मोजा आणि इष्टतम अंतर आणि दृष्य संतुलन राखण्यासाठी वस्तूंचे संभाव्यतः पुनर्वितरण करा.

जरी सीएसएस ग्रिड grid-template-rows: masonry सह चरण २ आणि ३ आपोआप हाताळते, तरीही मूळ अल्गोरिदम समजून घेतल्याने सर्वोत्तम वापरकर्त्याच्या अनुभवासाठी तुमची सामग्री आणि डिझाइन ऑप्टिमाइझ करण्यात मदत होते.

सीएसएस ग्रिडसह मेसनरी लेआउटची अंमलबजावणी

१. मूलभूत एचटीएमएल रचना

एका साध्या एचटीएमएल रचनेसह प्रारंभ करा. एक कंटेनर घटक (container element) त्या सर्व वस्तूंना धारण करेल ज्या मेसनरी लेआउटमध्ये मांडल्या जातील.

            <div class="masonry-container">
  <div class="masonry-item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="masonry-item"><img src="image3.jpg" alt="Image 3"></div>
  <!-- More items -->
</div>
            

              
                Copy
              
            
          

२. सीएसएस ग्रिड कॉन्फिगरेशन

कंटेनर घटकावर खालील सीएसएस नियम लागू करा:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-template-rows: masonry;
}

.masonry-item {
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}
            

              
                Copy
              
            
          

चला सीएसएसचे विश्लेषण करूया:

• display: grid;: कंटेनरसाठी सीएसएस ग्रिड लेआउट सक्षम करते.
• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));: रिस्पॉन्सिव्ह स्तंभ तयार करण्याची ही गुरुकिल्ली आहे.
• repeat(auto-fit, ...): कंटेनरमध्ये बसतील असे शक्य तितके स्तंभ आपोआप तयार करते. जेव्हा कंटेनर रिकामा असतो तेव्हा स्तंभ कोलॅप्स होतात.
• repeat(auto-fill, ...): कंटेनरमध्ये बसतील असे शक्य तितके स्तंभ आपोआप तयार करते, जरी त्यांना भरण्यासाठी पुरेशा वस्तू नसल्या तरी रिकामे स्तंभ जोडते.
• minmax(250px, 1fr): प्रत्येक स्तंभ किमान 250px रुंद असेल. अतिरिक्त जागा असल्यास, उपलब्ध जागा प्रमाणात भरण्यासाठी स्तंभ विस्तारित होतील. आपल्या डिझाइन आवश्यकतांनुसार 250px मूल्य समायोजित करा.
• auto-fit ऐवजी auto-fill वापरणे उपयुक्त ठरू शकते जर तुम्हाला उपलब्ध जागा भरण्यासाठी पुरेशी सामग्री नसताना ग्रिडने रिकामे स्तंभ दाखवावे असे वाटत असेल. तथापि, बहुतेक मेसनरी लेआउटमध्ये, auto-fit ला प्राधान्य दिले जाते.
• grid-gap: 10px;: ग्रिड आयटममध्ये 10px अंतर जोडते.
• grid-template-rows: masonry;: हा महत्त्वपूर्ण गुणधर्म आहे जो मेसनरी लेआउट अल्गोरिदम सक्षम करतो. हे ग्रिडला वस्तू अशा प्रकारे मांडण्यास सांगते की उभ्या रिकाम्या जागेचे प्रमाण कमी होईल. हे सध्या प्रायोगिक आहे आणि काही ब्राउझरमध्ये व्हेंडर प्रीफिक्सची आवश्यकता असू शकते किंवा प्रायोगिक वेब प्लॅटफॉर्म वैशिष्ट्ये सक्षम करण्याची आवश्यकता असू शकते. नोव्हेंबर २०२४ पर्यंत, हे फायरफॉक्समध्ये एका फ्लॅगद्वारे समर्थित आहे आणि सर्व ब्राउझरमध्ये मानकीकरणासाठी विचाराधीन आहे.
• break-inside: avoid;: प्रिंटिंग करताना किंवा मल्टी-कॉलम लेआउट वापरताना वस्तूंना स्तंभांमध्ये विभाजित होण्यापासून प्रतिबंधित करते. वस्तूंना एकत्र ठेवण्यासाठी हे महत्त्वाचे आहे.
• .masonry-item img: वस्तूंमधील प्रतिमा त्यांच्या कंटेनरमध्ये योग्यरित्या बसतील याची खात्री करते.

३. विविध आस्पेक्ट रेशोसह प्रतिमा हाताळणे

विविध आकार आणि आस्पेक्ट रेशोच्या वस्तू सामावून घेण्याची क्षमता हे मेसनरी लेआउटचे एक प्रमुख वैशिष्ट्य आहे. वरील कोड मूलभूत सेटअप हाताळतो, परंतु इच्छित स्वरूप प्राप्त करण्यासाठी आपल्याला प्रतिमेचा आकार किंवा आस्पेक्ट रेशो आणखी समायोजित करायचा असेल. एक दृष्टिकोन म्हणजे सीएसएसच्या object-fit गुणधर्माचा वापर करणे.

            .masonry-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* or contain, fill, scale-down */
}
            

              
                Copy
              
            
          

• object-fit: cover;: कंटेनर भरण्यासाठी प्रतिमेला क्रॉप करते, संभाव्यतः प्रतिमेचे काही भाग गमावले जातात परंतु ते संपूर्ण क्षेत्र व्यापते याची खात्री करते.
• object-fit: contain;: आस्पेक्ट रेशो जपून, कंटेनरमध्ये बसण्यासाठी प्रतिमेला स्केल करते. यामुळे वस्तूमध्ये रिकामी जागा निर्माण होऊ शकते.
• object-fit: fill;: कंटेनर भरण्यासाठी प्रतिमेला ताणते, संभाव्यतः प्रतिमेला विकृत करते.
• object-fit: scale-down;: प्रतिमा कंटेनरपेक्षा मोठी असल्यास तिला contain करण्यासाठी स्केल डाउन करते, अन्यथा ती तिच्या मूळ आकारात प्रदर्शित करते.

आपल्या सामग्री आणि डिझाइनच्या उद्दिष्टांना अनुकूल असे object-fit मूल्य निवडा.

नेटिव्ह सपोर्ट नसलेल्या ब्राउझरसाठी पॉलीफिलिंग

कारण grid-template-rows: masonry अजूनही प्रायोगिक आहे, त्यामुळे ज्या ब्राउझरमध्ये अद्याप समर्थन नाही त्यांच्यासाठी फॉलबॅक प्रदान करणे आवश्यक आहे. येथेच जावास्क्रिप्ट लायब्ररी उपयोगी पडतात. लोकप्रिय पर्यायांमध्ये हे समाविष्ट आहे:

• Masonry.js: एक मोठ्या प्रमाणावर वापरली जाणारी आणि सु-दस्तऐवजीकरण केलेली जावास्क्रिप्ट लायब्ररी, जी विशेषतः मेसनरी लेआउट तयार करण्यासाठी डिझाइन केलेली आहे.
• Isotope: एक अधिक प्रगत लायब्ररी जी मेसनरी लेआउट व्यतिरिक्त फिल्टरिंग, सॉर्टिंग आणि इतर वैशिष्ट्ये प्रदान करते.

Masonry.js कसे समाकलित करावे याचे एक मूलभूत उदाहरण येथे आहे:

1. Masonry.js समाविष्ट करा: आपल्या एचटीएमएल फाइलमध्ये Masonry.js लायब्ररी जोडा.

            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
            

              
                Copy
              
            
          

2. मेसनरी सुरू करा: DOM लोड झाल्यानंतर मेसनरी लेआउट सुरू करण्यासाठी जावास्क्रिप्ट वापरा.

            <script>
  window.onload = function() {
    var elem = document.querySelector('.masonry-container');
    var msnry = new Masonry( elem, {
      // options
      itemSelector: '.masonry-item',
      columnWidth: 250
    });
  };
</script>
            

              
                Copy
              
            
          

हा कोड .masonry-container घटक निवडतो आणि मेसनरी सुरू करतो, आयटम सिलेक्टर आणि स्तंभाची रुंदी निर्दिष्ट करतो. आपल्या सीएसएसमध्ये वापरलेल्या minmax मूल्याशी जुळण्यासाठी columnWidth पर्याय समायोजित करा.

कंडिशनल लोडिंग

Masonry.js फक्त आवश्यक असेल तेव्हाच लोड होईल याची खात्री करण्यासाठी, ब्राउझर grid-template-rows: masonry चे समर्थन करतो की नाही हे तपासण्यासाठी आपण वैशिष्ट्य ओळख (feature detection) वापरू शकता.

            <script>
  if (!('gridTemplateRows' in document.body.style)) {
    // Load Masonry.js if CSS Grid masonry is not supported
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js';
    script.onload = function() {
      var elem = document.querySelector('.masonry-container');
      var msnry = new Masonry( elem, {
        itemSelector: '.masonry-item',
        columnWidth: 250
      });
    };
    document.head.appendChild(script);
  } else {
      //CSS Grid masonry is supported
      console.log("CSS Grid Masonry is supported!");
  }
</script>
            

              
                Copy
              
            
          

कार्यक्षमतेसाठी मेसनरी लेआउट ऑप्टिमाइझ करणे

मेसनरी लेआउट्स काळजीपूर्वक लागू न केल्यास कार्यक्षमतेवर परिणाम करू शकतात. येथे काही ऑप्टिमायझेशन टिप्स आहेत:

• प्रतिमा ऑप्टिमायझेशन: फाइल आकार कमी करण्यासाठी आपल्या प्रतिमा वेबसाठी ऑप्टिमाइझ करा. गुणवत्तेत लक्षणीय घट न करता प्रतिमा कॉम्प्रेस करण्यासाठी TinyPNG किंवा ImageOptim सारख्या साधनांचा वापर करा. स्क्रीन आकार आणि रिझोल्यूशनवर आधारित विविध आकारांच्या प्रतिमा देण्यासाठी <picture> घटक किंवा srcset अॅट्रिब्यूटसह रिस्पॉन्सिव्ह प्रतिमा वापरण्याचा विचार करा.
• लेझी लोडिंग: व्ह्यूपोर्टमध्ये सुरुवातीला दिसत नसलेल्या प्रतिमांसाठी लेझी लोडिंग लागू करा. यामुळे सुरुवातीच्या पेज लोडची वेळ सुधारते. आपल्या <img> टॅगवर loading="lazy" अॅट्रिब्यूट वापरा, किंवा अधिक प्रगत लेझी लोडिंग तंत्रांसाठी जावास्क्रिप्ट लायब्ररी वापरा.
• व्हर्च्युअलायझेशन: खूप मोठ्या डेटासेटसाठी, फक्त सध्या व्ह्यूपोर्टमध्ये दिसणाऱ्या वस्तू रेंडर करण्यासाठी व्हर्च्युअलायझेशन तंत्र वापरण्याचा विचार करा. हजारो वस्तूंशी व्यवहार करताना हे कार्यक्षमतेत लक्षणीय सुधारणा करू शकते.
• रिसाइजिंग इव्हेंट्स डिबाउन्स करणे: फॉलबॅक अंमलबजावणीसाठी जावास्क्रिप्ट वापरताना, ब्राउझर विंडोचा आकार बदलल्यावर जास्त प्रमाणात पुनर्गणना टाळण्यासाठी रिसाइज इव्हेंटला डिबाउन्स करा. हे कार्यक्षमतेच्या समस्या टाळू शकते आणि प्रतिसाद सुधारू शकते.
• सामग्रीचे प्राधान्यीकरण: वेबसाइटच्या जाणवणाऱ्या कार्यक्षमतेत सुधारणा करण्यासाठी फोल्डच्या वरील (पृष्ठाचा दृश्यमान भाग) सामग्रीच्या लोडिंगला प्राधान्य द्या.

ॲक्सेसिबिलिटी विचार

तुमचा मेसनरी लेआउट दिव्यांगांसाठी ॲक्सेसिबल आहे याची खात्री करणे महत्त्वाचे आहे. खालील बाबी विचारात घ्या:

• सिमेंटिक एचटीएमएल: आपली सामग्री तार्किकदृष्ट्या संरचित करण्यासाठी सिमेंटिक एचटीएमएल घटकांचा वापर करा. हे स्क्रीन रीडरला सामग्री समजण्यास आणि पृष्ठावर प्रभावीपणे नेव्हिगेट करण्यास मदत करते.
• कीबोर्ड नॅव्हिगेशन: वापरकर्ते कीबोर्ड वापरून लेआउटमध्ये नेव्हिगेट करू शकतात याची खात्री करा. संभाव्य समस्या ओळखण्यासाठी आपल्या लेआउटची केवळ कीबोर्डने नॅव्हिगेशन करून चाचणी घ्या.
• फोकस व्यवस्थापन: कीबोर्ड वापरकर्त्यांसाठी तार्किक प्रवाह सुनिश्चित करण्यासाठी फोकस ऑर्डर योग्यरित्या व्यवस्थापित करा. घटक कोणत्या क्रमाने फोकस प्राप्त करतात हे नियंत्रित करण्यासाठी tabindex अॅट्रिब्यूट वापरा.
• प्रतिमांसाठी पर्यायी मजकूर: सर्व प्रतिमांसाठी alt अॅट्रिब्यूट वापरून वर्णनात्मक पर्यायी मजकूर प्रदान करा. हे स्क्रीन रीडरला दृष्यहीन वापरकर्त्यांपर्यंत प्रतिमांची सामग्री पोहोचविण्यास अनुमती देते.
• पुरेशी कॉन्ट्रास्ट: ॲक्सेसिबिलिटी मानकांची पूर्तता करण्यासाठी मजकूर आणि पार्श्वभूमी रंगांमध्ये पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा.
• ARIA अॅट्रिब्यूट्स: आवश्यक असल्यास, सहाय्यक तंत्रज्ञानांना अतिरिक्त माहिती प्रदान करण्यासाठी ARIA अॅट्रिब्यूट्स वापरा. तथापि, ARIA अॅट्रिब्यूट्सचा अतिवापर टाळा आणि शक्य असेल तेव्हा नेहमी सिमेंटिक एचटीएमएल घटकांचा वापर करा.

मेसनरी लेआउट्सची उदाहरणे

मेसनरी लेआउट्स विविध प्रकारच्या वेबसाइट्सवर मोठ्या प्रमाणावर वापरले जातात:

• Pinterest: मेसनरी लेआउटचे एक उत्कृष्ट उदाहरण, जे प्रतिमा आणि लिंक्स आकर्षक पद्धतीने दाखवते.
• Dribbble: एक डिझाइन प्रेरणा प्लॅटफॉर्म जो डिझाइन शॉट्स प्रदर्शित करण्यासाठी मेसनरी लेआउट्स वापरतो.
• Etsy: एक ई-कॉमर्स प्लॅटफॉर्म जो उत्पादन सूची दर्शविण्यासाठी मेसनरी लेआउट्स वापरतो.
• वृत्त वेबसाइट्स: काही वृत्त वेबसाइट्स लेख आणि इतर सामग्री डायनॅमिक आणि दृष्यदृष्ट्या आकर्षक पद्धतीने प्रदर्शित करण्यासाठी मेसनरी लेआउट्स वापरतात. हे त्यांना एकाच पृष्ठावर अधिक विविध प्रकारची सामग्री दर्शविण्याची अनुमती देते.
• पोर्टफोलिओ वेबसाइट्स: अनेक डिझायनर आणि छायाचित्रकार त्यांचे कार्य दृष्यदृष्ट्या आकर्षक पद्धतीने दर्शविण्यासाठी मेसनरी लेआउट्स वापरतात.

प्रगत तंत्रे

१. डायनॅमिक सामग्री लोडिंग

अनंत स्क्रोलिंग अनुभव तयार करण्यासाठी मेसनरी लेआउट्सना डायनॅमिक सामग्री लोडिंग तंत्रांसह एकत्र केले जाऊ शकते. जसा वापरकर्ता पृष्ठ खाली स्क्रोल करतो, तसतसे अधिक आयटम लोड केले जातात आणि लेआउटमध्ये जोडले जातात. यामुळे सामग्रीचा सतत प्रवाह प्रदान करून वापरकर्त्याचा अनुभव लक्षणीयरीत्या सुधारू शकतो.

२. फिल्टरिंग आणि सॉर्टिंग

वापरकर्त्यांना त्यांना हवी असलेली सामग्री सहज शोधता यावी यासाठी मेसनरी लेआउट्सना फिल्टरिंग आणि सॉर्टिंग कार्यक्षमतेसह देखील एकत्र केले जाऊ शकते. Isotope सारख्या लायब्ररी मेसनरी लेआउट्सच्या फिल्टरिंग आणि सॉर्टिंगसाठी अंगभूत समर्थन प्रदान करतात.

३. ॲनिमेशन आणि ट्रान्झिशन्स

ॲनिमेशन आणि ट्रान्झिशन्स जोडल्याने वापरकर्त्याचा अनुभव वाढू शकतो आणि लेआउट अधिक दृष्यदृष्ट्या आकर्षक बनू शकतो. गुळगुळीत आणि आकर्षक संवाद तयार करण्यासाठी सीएसएस ट्रान्झिशन्स आणि ॲनिमेशन वापरा. उदाहरणार्थ, लेआउटमध्ये आयटम जोडले जात असताना तुम्ही त्यांच्या अपारदर्शकतेचे (opacity) किंवा स्केलचे ॲनिमेशन करू शकता.

निष्कर्ष

सीएसएस ग्रिडचे प्रायोगिक मेसनरी लेआउट वैशिष्ट्य डायनॅमिक आणि दृष्यदृष्ट्या आकर्षक लेआउट तयार करण्याचा एक शक्तिशाली आणि कार्यक्षम मार्ग प्रदान करते. जरी ते अजूनही विकासाधीन असले तरी, मूळ अल्गोरिदम आणि उपलब्ध फॉलबॅक समजून घेतल्याने तुम्हाला वर्धित वापरकर्ता अनुभवासाठी या तंत्राचा फायदा घेता येतो. सीएसएस ग्रिडला जावास्क्रिप्ट लायब्ररींसह एकत्र करून आणि कार्यक्षमता व ॲक्सेसिबिलिटीसाठी ऑप्टिमाइझ करून, तुम्ही विविध ब्राउझर आणि डिव्हाइसेसवर काम करणारे आकर्षक मेसनरी लेआउट तयार करू शकता.